<template>
    <div>
        <div class="add" @click="userChooseDialogShow1 = true">选择人员</div>
        <eagle-page-list ref="eaglePageList" @bindData="bindData" :queryParams="queryParams" placeholder="请输入姓名搜索" :controller="controller" :conditions="conditions" :pageSize="20">

            <div slot="list">
                <van-cell class="card" v-for="(item, index) in list" :key="index">
                    <div>
                        <div>
                            <van-row gutter="20">
                                <van-col>
                                    <img class="icon" src="@/assets/Images/AppIcon/icon_list_user.png" />姓名：{{ item.UserChnName }}
                                </van-col>
                            </van-row>
                            <van-row gutter="20">
                                <van-col>
                                    <img class="icon" src="@/assets/Images/AppIcon/icon_list_type.png" />部门：{{ item.OrgName  }}
                                </van-col>
                            </van-row>
                            <van-row gutter="20">
                                <van-col>
                                    <img class="icon" src="@/assets/Images/AppIcon/icon_list_type.png" />岗位：{{ item.PostName }}
                                </van-col>
                            </van-row>
                            <van-divider />
                            <div class="op_btn">
                                <div class="btn_item" @click="deletePlan1(item)">
                                    <img src="@/assets/Images/AppIcon/icon_list_delete.png" alt="" />
                                    <div class="mr-10">移除</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-cell>
            </div>
        </eagle-page-list>
        <user-choose-dialog title="选择协助人员" :show.sync="userChooseDialogShow1" :IsAccounted="true" :isMulti="true" @callback="userChooseCallback1">
        </user-choose-dialog>
    </div>

</template>
<script>
import {
    GetPageData,
    deletePlan,
    WhAccidentInitialReportSendSave,
} from "@/api/WhAccidentInitialReportSend";
import investigateList from "@/views/wh/AccidentInvestigate/List.vue";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
export default {
    components: { investigateList, UserChooseDialog },
    data() {
        return {
            value: "",
            list: [],
            controller: "/WhAccidentInitialReportSend",
            userChooseDialogShow1: false,
            myLoading: false,
            myFinished: false,
            userChooseDialogShow: false,
            deptChooseDialogShow: false,
            searchValue: "",
            conditions: {},
            queryParams: {
                dataType: "Assist",
                AccidentNumber: this.$route.query.AccidentNumber,
            },
        };
    },
    created() {
        // let AccidentNumber = this.$route.query.AccidentNumber;
        // this.conditions.push({
        //     Name: "AccidentNumber",
        //     Value: AccidentNumber,
        //     Operator: "like",
        //     DataType: "String",
        // });
    },
    mounted() {
        //this.queryPage();
    },
    methods: {
        clearSearch() {
            this.value = "";
            //this.getList();
        },
        deletePlan1(item) {
            //调查报告删除
            const that = this;
            that.$dialog
                .confirm({
                    title: "询问",
                    message: "您确定要移除该协助人员吗？",
                })
                .then(() => {
                    deletePlan({ id: item.ID }).then((res) => {
                        this.$toast.success("移除成功！");
                        setTimeout(() => {
                            this.$refs.eaglePageList.search({});
                        }, 300);
                    });
                })
                .catch(() => {
                    // on cancel
                });
        },
        userChooseCallback1(data) {
            this.loading = true;
            let _this = this;
            var form1 = {};
            var UserNames = [];
            this.list.forEach((item1) => {
                data = data.filter((item) => item.name != item1.UserChnName);
            });
            data.map((item) => {
                UserNames.push(item.code);
            });
            form1.IsAssist = true;
            form1.UserNames = UserNames;
            form1.AccidentNumber = this.$route.query.AccidentNumber;
            WhAccidentInitialReportSendSave(form1)
                .then((res) => {
                    _this.loading = false;
                    _this.userChooseDialogShow1 = false;
                    setTimeout(() => {
                        _this.$refs.eaglePageList.search({});
                    }, 300);
                    _this.$toast.success("设置成功");
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },

        bindData(data) {
            this.list = [];
            if (data) {
                this.list = data;
            }
        },
        deptChooseDialogShow1(data) {
            this.loading = true;
            var form1 = {};
            var UserNames = [];
            data.map((item) => {
                UserNames.push(item.code);
            });
            form1.IsAssist = true;
            form1.UserNames = UserNames;
            form1.AccidentNumber = this.$route.query.AccidentNumber;
            form1.PublishType = "B";
            WhAccidentInitialReportSendSave(form1)
                .then((res) => {
                    this.loading = false;
                    this.bindData();
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },
        myOnLoad() {
            this.myLoading = true;
            this.filter.page;
            list(this.filter).then((res) => {
                this.myLoading = false;
                this.filter.page = res.data.PageIndex;
                this.myList = this.myList.concat(res.data.Data);
                if (!res.data.HasNextPage) {
                    this.myFinished = true;
                }
            });
        },
        onLoad() {
            this.loading = true;
            ++this.filter.page;
        },
        tabChange(val) {
            this.tabName = val;
        },
    },
};
</script>
<style lang="less" scoped>
.register-form {
}
.phone {
    position: relative;
    .code {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 12px;
    }
}
.register-info {
    background-color: #e8f1f8;
    padding-bottom: 20px;
}
.img-box {
    height: 50px;
    width: 50px;
    padding: 10px;
    position: absolute;
    left: 50%;
    top: 60px;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
}
.popup-title {
    line-height: 35px;
    padding: 10px;
    font-size: 15px;
    padding-left: 20px;
}

.op_btn {
    display: flex;
    justify-content: flex-end;
    .btn_item {
        display: flex;
        align-items: center;
        img {
            height: 15px;
            width: 15px;
            margin-right: 5px;
        }
    }
}
</style>